<template>
	<view >
		<view class="formModel">
		<view class="cu-form-group">
			<view class="title">养殖场名</view>
			<input v-model="farmName"  placeholder="请输入养殖场名" name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">负责人</view>
			<input v-model="principal" maxlength="5" placeholder="请输入负责人名字"  name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">联系电话</view>
			<input type="number" v-model="phone" maxlength="11" placeholder="请输入联系电话"  name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">备用电话</view>
			<input type="number" v-model="standbyPhone" maxlength="11" placeholder="请输入备用电话"  name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">地址</view>
			<picker disabled="flase" >
				<view class="picker" @tap="chooseLocation">
					<block v-if="hasLocation === false"><text>打开地图选择地址</text></block>
					<block v-if="hasLocation === true">{{locationAddress}}</block>
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">详细地址</view>
			<input v-model="detailAddress" placeholder="请输入详细地址,如街道门牌号等"  name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">备注信息：</view>
		</view>
		<view class="cu-form-group ">
			<textarea maxlength="-1"   @input="textareaAInput" placeholder="描述一下疫情信息"></textarea>
		</view>
		<view class="imageUp">
			<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
				<view class="action">
					疫情图片上传
				</view>
				<view class="action" style="font-size: 30rpx;">
					{{imgList.length}}/{{maxImg}}
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;
	export default {
		data() {
			return {
				imgList: [],
				num:0,
				hasLocation: false,
				location: {},
				locationAddress: '',
				model:'',
				farmName:'',//养殖场名
				principal:'',//负责人
				phone:'',//联系电话
				standbyPhone:'',//备用电话
				detailAddress:'',//详细地址
				postscript:'',//备注信息
				data:'',
				disabled:false,
				imagePaths:[],
				imgNum:0,
				maxImg:4,
			};
		},
		onReady() {
			this.getSysteminfo();
			this.change();
		},
		onLoad() {
			
		},
		watch: {
			farmName(val) {
				this.change();
			},
			principal(val) {
				this.change();
			},
			phone(val) {
				this.change();
			},
			standbyPhone(val){
				this.change();
			}
		},
		onNavigationBarButtonTap(){
			
			this.postEpidemic()
		},
		methods:{
			//多行文本框
			textareaAInput(e) {
				this.postscript = e.detail.value
				// console.log(this.postscript)
			},
			//打开地图
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.data = res;
						this.hasLocation = true,
						this.location = formatLocation(res.longitude, res.latitude),
						this.locationAddress = res.address
					}
				})
			},
			//监听输入
			change() {
				if (this.farmName && this.principal && this.phone && this.standbyPhone) {
					this.disabled = true;
					return;
				}
				this.disabled = false;
			},
			//验证手机号
			isPhone(){
				let regex = {
				    mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.phone);
			},
			isStandbyPhone(){
				let regex = {
				    mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.standbyPhone);
			},
			//提交
			postEpidemic(){
				if(!this.disabled || !this.data.address){
					uni.showModal({
						showCancel:false,
						title:"提示",
						content:"请检查养殖场名、负责人、联系电话、备用电话和地址是否为空！",
						success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } 
						    }  
					});return;
				};
				if(!this.isPhone() || !this.isStandbyPhone()){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"none"
					});
					return;
				};
					console.log(this.imagePaths)
				var address = this.data.address+this.detailAddress;
				// console.log(address+"---"+this.model+"---"+this.data.latitude+"---"+this.data.longitude
				// +"---"+this.farmName+"---"+this.principal+"---"+this.phone+"---"+this.standbyPhone+"---"+this.postscript)
				uni.request({
					url:this.confige.webUrl+"/epidemic/addEpidemic",
					data:{
						handheld_terminal_address:address,
						handheld_terminal_brand:this.model,
						handheld_terminal_latitude:this.data.latitude,
						handheld_terminal_longitude:this.data.longitude,
						handheld_terminal_name:this.farmName,
						handheld_terminal_person_in_charge:this.principal,
						handheld_terminal_phone:this.phone,
						handheld_terminal_standby_phone:this.standbyPhone,
						handheld_terminal_remarks:this.postscript,
						picture:this.imagePaths
					},
					method:"POST",
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res)
						switch(res.data.code/100){
							case 2:
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:"您的疫情信息已经成功上报，请等待处理",
							    success:(res)=> {
									if (res.confirm) {
									uni.redirectTo({
										url:"./epidemicList/epidemicList"
									})
									} 
								}
							});
							break;
							case 4:
							uni.showModal({
								title:"提示",
								showCancel:false,
								content:res.data.message,
							    success:(res)=> {
									if (res.confirm) {
									uni.redirectTo({
										url:"../productionAdmin"
									})
									} 
								}
							});
							this.deleteServerImg(this.imagePaths)
						}
					}	
				})
			},
			//删除服务器的图片
			deleteServerImg(FilePaths){
				console.log(FilePaths);
				uni.request({
					url:this.confige.webUrl+"/delePicture",
					data:{
						picture:FilePaths
					},
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res);
					}
				})
			},
			//图片上传
			imageUpload(FilePaths){
				 uni.uploadFile({
				            url:this.confige.webUrl+"/epidemic/addProFile",
				            filePath: FilePaths,
				            name: 'file',
				            formData:{
				                'token':this.User.token
				            },
				            success: (uploadFileRes) => {
								let img = JSON.parse(uploadFileRes.data);
								// console.log(img)
								this.imagePaths.push(img.url) ;
								console.log(this.imagePaths)
								this.imgNum++;
								console.log(this.imgNum)
								
				            }
				        });
			},
			//获取用户信息
			getSysteminfo(){
				uni.getSystemInfo({
				    success: (res) =>{
						this.model = res.model;
				      }  });
					  // this.userPhone = this.User.userInfo.phone;
					  // this.userName = this.User.userInfo.user_name;
			},
			ChooseImage() {
				uni.chooseImage({
					count:this.maxImg-this.imgList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
							if(this.imgList.length>0){
								for(let i=0;i<this.imgList.length;i++){
									this.imageUpload(this.imgList[i]);
								}
							}
							console.log(this.imgList)
						} else {
							this.imgList = res.tempFilePaths;
							console.log(this.imgList)
							if(this.imgList.length>0){
								for(let i=0;i<this.imgList.length;i++){
									this.imageUpload(this.imgList[i]);
								}
							}
						}
				}
				});
			},
			//预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
						 this.imgList.splice(e.currentTarget.dataset.index, 1)
						let delect = this.imagePaths.splice(e.currentTarget.dataset.index, 1)
						this.deleteServerImg(delect)
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
@import "../../../common/colorui/main.css";
@import "../../../common/colorui/icon.css";
@import "../../../common/global.less";
page{ }
.mapText{ font-size: 28upx;}
.RadioStyle{ 
	radio{
		margin-right: 10rpx;
		font-size: 30rpx;
		}
	}
.bottomModel{
margin-top: 50rpx;
// .butStyle{font-size: 30rpx; border-radius: 90rpx;width: 600rpx; height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
}
.formModel{
background-color:@backcolorthree;
border-bottom:2rpx solid #eaeaea;
.cu-form-group {
.title {min-width: calc(4em + 15px);}		
}
}

</style>
